<template>
  <div class="contentTop">
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="commonHeightTop contentBg" v-if="isEsUser()">
          <div>
            <p class="fontColor comFontSize TitleStyle">
              实名制
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
          </div>
          <div style="height: 100%; position: relative">
            <el-row class="contentBoxTop">
              <el-col :span="13">
                <div class="RealNameBox">
                  <div class="comSinFontSize fontColor">实名制人数</div>
                  <div class="numColor maxNum">
                    {{ realNameStatisticData.empCount }}
                  </div>
                </div>
                <div class="realNameProportion">
                  <!-- <span class = "markStyle markBgO"></span><span class = "sinFontColor comSinFontSize mLTen">实名制考勤比例</span><span class = "numColor comFontSize mLTen">{{realNameStatisticData.attScale}}%</span> -->
                  <span class="markStyle markBgO"></span
                  ><span class="sinFontColor comSinFontSize mLTen"
                    >实名制考勤比例</span
                  ><span class="numColor comFontSize mLTen">91.5%</span>
                </div>
                <div class="realNameProportion">
                  <!-- <span class = "markStyle markBg"></span><span class = "sinFontColor comSinFontSize mLTen">实名制合同比例</span><span class = "numColor comFontSize mLTen">{{realNameStatisticData.contractScale}}%</span> -->
                  <span class="markStyle markBg"></span
                  ><span class="sinFontColor comSinFontSize mLTen"
                    >实名制合同比例</span
                  ><span class="numColor comFontSize mLTen">85.2%</span>
                </div>
              </el-col>
              <el-col :span="9" class="projectFigure">
                <div
                  id="realName"
                  class="statistic"
                  style="position: relative"
                ></div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="commonHeightTop contentBg" v-if="!isEsUser()">
          <div>
            <p class="fontColor comFontSize TitleStyle">项目统计</p>
          </div>
          <div style="height: 100%; position: relative">
            <el-row class="contentBoxTop">
              <el-col :span="8" class="projectDataTitBox">
                <p>
                  <span class="markStyle markBg"></span
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >项目总数</span
                  >
                </p>
                <p>
                  <span class="markStyle markBgO"></span
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >在建项目</span
                  >
                </p>
                <p v-if="!investmentType">
                  <span class="markStyle markBgT"></span
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >政府投资</span
                  >
                </p>
                <p v-else>
                  <span class="markStyle markBgT"></span
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >已开专户项目数</span
                  >
                </p>
              </el-col>
              <el-col :span="8" class="projectFigure">
                <div id="projectStatistic" class="statistic staSty"></div>
              </el-col>
              <el-col :span="8" class="projectDataBox"
                ><div class="grid-content bg-purple"></div>
                <p class="numColor comFontSize">
                  {{ porjectStatisticData.allCount }}
                </p>
                <p class="numColor comFontSize">
                  {{ porjectStatisticData.startCount }}
                </p>
                <p class="numColor comFontSize">
                  {{ porjectStatisticData.count }}
                </p>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="commonHeightTop contentBg mTTen">
          <div>
            <p class="fontColor comFontSize TitleStyle">
              工资代发
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
          </div>
          <div style="height: 100%; position: relative">
            <el-row class="contentBoxTop">
              <el-col :span="12" class="salaryBox">
                <p>
                  <i class="icon iconfont icongongzifafang iconColor"></i
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >工资发放总额</span
                  >
                </p>
                <p>
                  <i class="icon iconfont icongongzidaifarenci iconColor"></i
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >工资代发人次</span
                  >
                </p>
                <p v-if="isEsUser()">
                  <i class="icon iconfont iconanyuedaifa iconColor"></i
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >当月代发项目比例</span
                  >
                </p>
              </el-col>
              <el-col :span="12" class="salaryDataBox">
                <p class="numColor comFontSize">
                  {{ salaryList.totalPaidMoney }}万元
                </p>
                <p class="numColor comFontSize">
                  {{ salaryList.totalPaidTimes }}人次
                </p>
                <!-- <p class = "numColor comFontSize" v-if = "isEsUser()">{{salaryList.monthScale}}</p> -->
                <p class="numColor comFontSize" v-if="isEsUser()">75.6%</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8" v-if="isEsUser()">
        <div class="commonHeightTopPro contentBg">
          <div>
            <p class="fontColor comFontSize TitleStyle">项目统计</p>
          </div>
          <div style="height: 89%; position: relative">
            <el-row class="contentBoxTop" style="height: 100% !important">
              <ul class="proBox">
                <li class="comSinFontSize sinFontColor">
                  <span>在建项目总数</span
                  ><span class="fr numColor"
                    >{{ porjectStatisticData.allStartCount }}个</span
                  >
                </li>
                <!-- <li class = "comSinFontSize sinFontColor"><span>已完善项目总数</span><span class = "fr numColor">{{porjectStatisticData.perfectCount}}个，{{porjectStatisticData.perfectPer}}</span></li> -->
                <!-- <li class = "comSinFontSize sinFontColor" v-if ="isEsUser()"><span>已开户项目数</span><span class = "fr numColor">{{`786`}}个，{{`96.9%`}}</span></li> -->
                <li class="comSinFontSize sinFontColor" v-if="isEsUser()">
                  <span>已开户项目数</span
                  ><span class="fr numColor"
                    >{{ accountStatisticData.accountCount }}个，{{
                      accountStatisticData.accountOpenedPercent
                    }}%</span
                  >
                </li>
                <li class="comSinFontSize sinFontColor" v-else>
                  <span>已开户项目数</span
                  ><span class="fr numColor"
                    >{{ porjectStatisticData.accountCount }}个，{{
                      porjectStatisticData.accountPer
                    }}</span
                  >
                </li>
                <li class="comSinFontSize sinFontColor">
                  <span>已落实实名制项目数</span
                  ><span class="fr numColor"
                    >{{ porjectStatisticData.realNameCount }}个，{{
                      porjectStatisticData.realNamePer
                    }}</span
                  >
                </li>
                <li class="comSinFontSize sinFontColor">
                  <span>已代发项目数</span
                  ><span class="fr numColor"
                    >{{ porjectStatisticData.replaceCount }}个，{{
                      porjectStatisticData.replacePer
                    }}</span
                  >
                </li>
                <li class="comSinFontSize sinFontColor">
                  <span>已落实考勤项目数</span
                  ><span class="fr numColor"
                    >{{ porjectStatisticData.attCount }}个，{{
                      porjectStatisticData.attPer
                    }}</span
                  >
                </li>
              </ul>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8" v-if="!isEsUser()">
        <div class="commonHeightTop contentBg">
          <div>
            <p class="fontColor comFontSize TitleStyle">
              实名制
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
          </div>
          <div style="height: 100%; position: relative">
            <el-row class="contentBoxTop">
              <el-col :span="13">
                <div class="RealNameBox">
                  <div class="comSinFontSize fontColor">实名制人数</div>
                  <div class="numColor maxNum">
                    {{ realNameStatisticData.empCount }}
                  </div>
                </div>
                <div class="realNameProportion" v-if="!isShiYanUser()">
                  <span class="markStyle markBgO"></span
                  ><span class="sinFontColor comSinFontSize mLTen">{{
                    isWhUser() ? '已代发工资且有考勤人员比例' : '实名制考勤比例'
                  }}</span
                  ><span class="numColor comFontSize mLTen"
                    >{{ realNameStatisticData.attScale }}%</span
                  >
                </div>
                <div class="realNameProportion">
                  <span class="markStyle markBg"></span
                  ><span class="sinFontColor comSinFontSize mLTen">{{
                    isWhUser()
                      ? '已代发工资且已签合同人员比例'
                      : '实名制合同比例'
                  }}</span
                  ><span class="numColor comFontSize mLTen"
                    >{{ realNameStatisticData.contractScale }}%</span
                  >
                </div>
              </el-col>
              <el-col :span="9" class="projectFigure">
                <div
                  id="realName"
                  class="statistic"
                  style="position: relative"
                ></div>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- <div class = "commonHeightTop contentBg mTTen">
                    <div>
                        <p class = "fontColor comFontSize TitleStyle">工程款支付担保 <span class = "titleTip comSinFontSize">（仅统计已开工项目）</span></p>
                    </div>
                    <div style = "height:100%;position:relative">
                        <el-row class = "contentBoxTop">
                            <el-col :span="13">
                                <div class = "RealNameBox">
                                    <div class = "comSinFontSize fontColor">支付担保项目数</div>
                                    <div class = "numColor maxNum">{{payList.payNum}}</div>
                                </div>
                                <div class = "realNameProportion">
                                    <span class = "markStyle markBgO"></span><span class = "sinFontColor comSinFontSize mLTen">支付担保比例</span><span class = "numColor comFontSize mLTen">{{payList.payProportion}}%</span>
                                </div>
                            </el-col>
                            <el-col :span="9"  class = "projectFigure">
                                <div id = "salaryFigure" class="statistic" style = "position:relative;top:-30px;"></div>
                            </el-col>
                        </el-row>
                    </div>
                </div> -->
        <div class="commonHeightTop contentBg mTTen">
          <div>
            <p class="fontColor comFontSize TitleStyle">
              维权信息告示牌
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
          </div>
          <div style="height: 100%; position: relative">
            <el-row class="contentBoxTop">
              <el-col :span="13">
                <div class="RealNameBox">
                  <div class="comSinFontSize fontColor">告示牌上传项目数</div>
                  <div class="numColor maxNum">{{ payList.payNum }}</div>
                </div>
                <div class="realNameProportion">
                  <span class="markStyle markBgO"></span
                  ><span class="sinFontColor comSinFontSize mLTen"
                    >告示牌上传比例</span
                  ><span class="numColor comFontSize mLTen"
                    >{{ payList.payProportion }}%</span
                  >
                </div>
              </el-col>
              <el-col :span="9" class="projectFigure">
                <div
                  id="salaryFigure"
                  class="statistic"
                  style="position: relative; top: -30px"
                ></div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="commonHeightTop contentBg">
          <div>
            <p class="fontColor comFontSize TitleStyle" v-if="isEsUser()">
              专户管理
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
            <p class="fontColor comFontSize TitleStyle" v-else>
              分账拨付
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
          </div>
          <div style="height: 100%; position: relative">
            <el-row class="contentBoxTop">
              <el-col :span="13">
                <div class="RealNameBox">
                  <div class="comSinFontSize fontColor">专户开设数</div>
                  <div class="numColor maxNum">
                    {{ accountStatisticData.accountCount }}
                  </div>
                </div>
                <div class="realNameProportion">
                  <span class="markStyle markBgO"></span
                  ><span class="sinFontColor comSinFontSize mLTen"
                    >专户开设比例</span
                  ><span class="numColor comFontSize mLTen"
                    >{{ accountStatisticData.accountOpenedPercent }}%</span
                  >
                </div>
                <div
                  class="realNameProportion realNameProportionES"
                  v-if="!isEsUser()"
                >
                  <span class="markStyle markBg"></span
                  ><span class="sinFontColor comSinFontSize mLTen">{{
                    isWhUser() ? '项目专户已拨付比例' : '专户缴存比例'
                  }}</span
                  ><span class="tips" v-if="isWhUser()"
                    >(有缴纳或代发流水项目比例)</span
                  ><span class="numColor comFontSize mLTen"
                    >{{ accountStatisticData.accountDepositPercent }}%</span
                  >
                </div>
              </el-col>
              <el-col :span="9" class="projectFigure">
                <div
                  id="accountFigure"
                  class="statistic"
                  style="position: relative"
                ></div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="commonHeightTop contentBg mTTen">
          <div>
            <p class="fontColor comFontSize TitleStyle" v-if="isEsUser()">
              其他
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
            <p class="fontColor comFontSize TitleStyle" v-else>
              保证金
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
          </div>
          <div style="height: 100%">
            <el-row>
              <el-col :span="otherShowWidth">
                <div :class="isEsUser() ? 'otherBg' : 'otherBg mr'">
                  <div>
                    <img
                      src="../../../static/img/dataOverView/deposit.png"
                      alt=""
                      class="otherPicSty"
                    />
                    <div class="sinFontColor comSinFontSize medSinSize">
                      保证金缴存比例
                    </div>
                    <div
                      class="maxNum medMaxSize medSty"
                      style="color: #53ffac"
                    >
                      {{ marginList.inScale }}
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="otherShowWidth">
                <div :class="isEsUser() ? 'otherBg' : 'otherBg ml'">
                  <div>
                    <img
                      src="../../../static/img/dataOverView/useMargin.png"
                      alt=""
                      class="otherPicSty"
                    />
                    <div class="sinFontColor comSinFontSize medSinSize">
                      保证金动用比例
                    </div>
                    <div
                      class="maxNum medMaxSize medSty"
                      style="color: #26bbff"
                    >
                      {{ marginList.outScale }}
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" v-if="isEsUser()">
                <div class="otherBg">
                  <div>
                    <img
                      src="../../../static/img/dataOverView/publicSign.png"
                      alt=""
                      class="otherPicSty"
                    />
                    <div class="sinFontColor comSinFontSize medSinSize">
                      维权公示牌上传比例
                    </div>
                    <div class="maxNum medMaxSize" style="color: #ffcc03">
                      {{ marginList.psScale }}
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'overViewCommon',
  data() {
    return {
      porjectStatisticData: {}, //项目统计
      realNameStatisticData: {}, //实名制
      accountStatisticData: {}, //分账拨付
      echartsSize: '1',
      myChart: '',
      chartAccount: '',
      chartRealName: '',
      // 大屏中间部分
      salaryList: {},
      payList: {},
      marginList: {},
      chartPay: '',
      otherShowWidth: this.isEsUser() ? '8' : '12',
    }
  },
  props: {
    area: {
      type: String,
      default: false,
    },
    investmentType: {
      type: String,
      default: false,
    },
  },
  activated() {
    // 解决其他页面浏览器放大缩小，切换到本页面echarts不显示的问题
    if (this.myChart) {
      this.myChart.resize()
    } else if (this.chartAccount) {
      this.chartAccount.resize()
    } else if (this.chartRealName) {
      this.chartRealName.resize()
    } else if (this.chartPay) {
      this.chartPay.resize()
    }
  },
  created() {
    this.getStaticData()
    this.getRealName()
    this.getAccountData()
    // 获取工资代发数据
    this.getSalaryData()
    this.getOther()
    if (!this.isEsUser()) {
      this.rightsProtectionInfo() //获取维权信息
    }
  },
  mounted() {
    // const windowWidth = window.screen.width;
    const windowHeight = window.screen.height
    if (windowHeight > 768 && windowHeight <= 900) {
      this.echartsSize = '2'
    }
    if (windowHeight <= 800) {
      this.echartsSize = '3'
    }
  },
  watch: {
    area(newValue, oldValue) {
      this.area = newValue
      this.getStaticData()
      this.getRealName()
      this.getAccountData()
      // 大屏中间部分
      this.getSalaryData()
      this.getOther()
      if (!this.isEsUser()) {
        this.rightsProtectionInfo() //获取维权信息
      }
    },
    investmentType(newValue, oldValue) {
      this.investmentType = newValue
      this.getStaticData()
      this.getRealName()
      this.getAccountData()
      // 大屏中间部分
      this.getSalaryData()
      this.getOther()
      if (!this.isEsUser()) {
        this.rightsProtectionInfo() //获取维权信息
      }
    },
  },
  methods: {
    // 获取项目统计数据
    getStaticData() {
      var urlAdr
      if (this.isEsUser()) {
        urlAdr = '/api-p/projectstats/expand/projectstatscount'
      } else {
        urlAdr = '/api-p/projectstats/expand/dataprostats'
      }
      this.axios({
        method: 'post',
        url: urlAdr,
        data: {
          areaId: this.area,
          investment: this.investmentType,
        },
      })
        .then((resp) => {
          this.porjectStatisticData = resp.data.result
          if (!this.isEsUser()) {
            this.getPorjectStatistic()
          }
        })
        .catch((resp) => {
          console.log('请求失败')
        })
    },
    // 获取实名制数据
    getRealName() {
      this.axios({
        method: 'post',
        url: '/api-s/cs/employeestats/base/empstats',
        data: {
          areaId: this.area,
          investment: this.investmentType,
        },
      })
        .then((resp) => {
          this.realNameStatisticData = resp.data.result
          this.getRealNameOrAccount('realName')
        })
        .catch((resp) => {
          console.log('请求失败')
        })
    },
    // 获取分账拨付数据
    getAccountData() {
      this.axios({
        method: 'post',
        url: '/api-p/projectstats/expand/projectaccountcount',
        data: {
          areaId: this.area,
          investment: this.investmentType,
        },
      })
        .then((resp) => {
          this.accountStatisticData = resp.data.result
          this.getRealNameOrAccount('accountFigure')
        })
        .catch((resp) => {
          console.log('请求失败')
        })
    },
    getPorjectStatistic() {
      this.$nextTick(() => {
        this.myChart = this.$echarts.init(
          document.getElementById('projectStatistic')
        )
        var funSize
        if (this.echartsSize == '2') {
          funSize = '70'
        } else if (this.echartsSize == '3') {
          funSize = '40'
        } else {
          funSize = '90'
        }
        var option = {
          color: ['#52FFAC', '#26BBFF', '#3F7EEF'],
          series: [
            {
              name: '漏斗图',
              type: 'funnel',
              left: '10%',
              top: 50,
              //x2: 80,
              width: '80%',
              height: funSize,
              minSize: '0',
              maxSize: '100%',
              sort: 'descending',
              gap: 2,
              label: {
                show: true,
                position: 'inside',
              },
              labelLine: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: 'solid',
                },
              },
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1,
              },
              emphasis: {
                label: {
                  fontSize: 20,
                },
              },
              data: [20, 40, 60],
            },
          ],
        }
        this.myChart.setOption(option)
        window.addEventListener('resize', () => {
          this.myChart.resize()
        })
      })
    },
    getRealNameOrAccount(id) {
      this.$nextTick(() => {
        var temp, tempData, tipName

        if (id == 'realName') {
          tipName = '实名制'
          this.chartRealName = this.$echarts.init(
            document.getElementById('realName')
          )
          if (this.isShiYanUser()) {
            ;(temp = []),
              (tempData = [
                {
                  value: this.realNameStatisticData.contractScale,
                  name: '实名制合同比例',
                },
                {
                  value: 100 - this.realNameStatisticData.contractScale,
                  name: '实名制无合同比例',
                },
              ])
          } else {
            ;(temp = [
              {
                value: this.realNameStatisticData.attScale,
                name: '实名制考勤比例',
              },
              {
                value: 100 - this.realNameStatisticData.attScale,
                name: '实名制无考勤比例',
              },
            ]),
              (tempData = [
                {
                  value: this.realNameStatisticData.contractScale,
                  name: '实名制合同比例',
                },
                {
                  value: 100 - this.realNameStatisticData.contractScale,
                  name: '实名制无合同比例',
                },
              ])
          }
        } else if (id == 'accountFigure') {
          if (this.isEsUser()) {
            tipName = '专户管理'
            temp = []
            tempData = [
              {
                value: this.accountStatisticData.accountOpenedPercent,
                name: '专户开设比例',
              },
              {
                value: 100 - this.accountStatisticData.accountOpenedPercent,
                name: '未专户录入比例',
              },
            ]
          } else {
            tipName = '分账拨付'
            ;(temp = [
              {
                value: this.accountStatisticData.accountOpenedPercent,
                name: '专户开设比例',
              },
              {
                value: 100 - this.accountStatisticData.accountOpenedPercent,
                name: '未专户录入比例',
              },
            ]),
              (tempData = [
                {
                  value: this.accountStatisticData.accountDepositPercent,
                  name: '专户缴存比例',
                },
                {
                  value: 100 - this.accountStatisticData.accountDepositPercent,
                  name: '未专户缴存比例',
                },
              ])
          }
          this.chartAccount = this.$echarts.init(
            document.getElementById('accountFigure')
          )
        }

        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}:{d}%',
          },
          series: [
            {
              name: tipName,
              type: 'pie',
              selectedMode: 'single',
              radius: ['30%', '20%'],
              //   radius: ['40%', '55%'],
              label: {
                position: 'inner',
                show: false,
              },
              labelLine: {
                show: false,
              },
              data: temp,
              color: ['#26BBFF', '#1C405B'],
              center: ['50%', '35%'],
            },
            {
              name: tipName,
              type: 'pie',
              radius: ['40%', '55%'],
              color: ['#3F7EEF', '#1C405B'],
              label: {
                position: 'inner',
                show: false,
              },
              center: ['50%', '35%'],

              data: tempData,
            },
          ],
        }
        if (id == 'realName') {
          this.chartRealName.setOption(option)
          window.addEventListener('resize', () => {
            this.chartRealName.resize()
          })
        } else if (id == 'accountFigure') {
          this.chartAccount.setOption(option)
          window.addEventListener('resize', () => {
            this.chartAccount.resize()
          })
        }
      })
    },
    // 获取工资代发
    getSalaryData() {
      this.axios({
        method: 'post',
        url: '/api-p/projectstats/expand/projectsalarystats',
        data: {
          areaId: this.area,
          investment: this.investmentType,
        },
      })
        .then((resp) => {
          this.salaryList = resp.data.result
        })
        .catch((resp) => {
          console.log('请求失败')
        })
    },
    // 获取其他
    getOther() {
      let urlAdr
      if (this.isEsUser()) {
        urlAdr = '/api-p/projectstats/expand/otherstats'
      } else {
        urlAdr = '/api-p/projectstats/expand/depositstats'
      }
      this.axios({
        method: 'post',
        url: urlAdr,
        data: {
          areaId: this.area,
          investment: this.investmentType,
        },
      })
        .then((resp) => {
          this.marginList = resp.data.result
        })
        .catch((resp) => {
          console.log('请求失败')
        })
    },
    // 获取维权信息告示
    rightsProtectionInfo() {
      this.axios({
        method: 'post',
        url: '/api-p/projectstats/expand/rightsnoticestats',
        data: {
          areaId: this.area,
          investment: this.investmentType,
        },
      })
        .then((resp) => {
          this.payList = resp.data.result
          this.payList.payNum = resp.data.result.rightsCount
          this.payList.payProportion = resp.data.result.rightsScale
          this.$nextTick(() => {
            this.getSalary()
          })
        })
        .catch((resp) => {
          console.log('请求失败')
        })
    },
    getSalary() {
      this.$nextTick(() => {
        this.chartPay = this.$echarts.init(
          document.getElementById('salaryFigure')
        )
        var temp = [
          {
            value: this.payList.payProportion,
            name: '告示牌上传比例',
          },
          {
            value: 100 - this.payList.payProportion,
            name: '告示牌未上传比例',
          },
        ]
        var centerData = ''
        if (this.payList.payProportion) {
          centerData =
            this.payList.payProportion == 0
              ? 0
              : this.payList.payProportion + '%'
        }
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}:{d}%',
          },
          color: ['#26BBFF', '#1C405B'],
          series: [
            {
              name: '维权信息告示牌',
              type: 'pie',
              radius: ['40%', '55%'],
              label: {
                normal: {
                  position: 'inner',
                  show: false,
                },
              },
              data: temp,
            },
          ],
          graphic: [
            {
              type: 'text',
              left: 'center',
              top: '47%',
              z: 10,
              zlevel: 10,
              style: {
                text: centerData,
                fill: '#53FFAC',
                textAlign: 'center',
                font: 'small-caps 12px/1 sans-serif',
              },
            },
          ],
        }
        this.chartPay.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPay.resize()
        })
      })
    },
  },
}
</script>

<style lang="less" scoped>
.realNameProportionES {
  position: relative;
  .tips {
    position: absolute;
    left: 15px;
    top: 18px;
    font-size: 14px;
    color: #fff;
  }
}
.contentTop {
  height: calc(50%);
  // margin-top:10px;
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
    }
  }
}
.commonHeightTop {
  height: calc(50% - 5px);
}
.commonHeightTopPro {
  height: calc(100%);
}
.contentBg {
  background: rgba(29, 65, 96, 0.5);
}
.fontColor {
  color: #fff;
}
.comFontSize {
  font-size: 16px;
}
.comSinFontSize {
  font-size: 14px;
}
.sinFontColor {
  // color:#7193B2;
  color: #fff;
}
.numColor {
  color: #53ffac;
}
.maxNum {
  font-size: 20px;
}
.minNum {
  font-size: 12px;
}
.TitleStyle {
  font-weight: bold;
  padding: 2.5% 0;
  //    padding-left: 10px;
  &::before {
    content: '';
    background: #265faa;
    display: inline-block;
    width: 3px;
    height: 16px;
    margin-right: 8px;
    margin-left: 10px;
    position: relative;
    top: 2px;
  }
}
.contentBoxTop {
  // height:90% !important;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  .markStyle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
  }
  P {
    position: relative;
    top: 0;
    margin-bottom: 26px;
    height: 18px;
  }
  .contentBox {
    text-align: center;
  }
  .markTitle {
    margin-left: 10px;
  }
  .proBox {
    // position: absolute;
    // top: 50%;
    // transform: translateY(-50%);
    // -ms-transform: translateY(-50%);
    // -moz-transform: translateY(-50%);
    // -webkit-transform: translateY(-50%);
    // -o-transform: translateY(-50%);
    // width: 100%;
    padding: 0 20px;
    li {
      padding: 2% 10px;
      background: #1c405b;
      margin-bottom: 2.5%;
    }
  }
}
.projectDataBox {
  padding-right: 20px;
  text-align: right;
}
.projectDataTitBox {
  padding-left: 20px;
}
.markBg {
  background: #3f7eef;
}
.markBgO {
  background: #26bbff;
}
.markBgT {
  background: #52ffac;
}
.projectFigure {
  height: calc(100%);
  .statistic {
    position: relative;
    height: calc(100%);
  }
  .staSty {
    top: -45px;
  }
}
.RealNameBox {
  width: 136px;
  margin-left: 21px;
  background: #1c405b;
  padding: 8px 11px;
}
.realNameProportion {
  margin-left: 21px;
  position: relative;
  margin-top: 10px;
  // margin-top:12px;
}
.mLTen {
  margin-left: 10px;
}
.titleTip {
  color: #7a8b9b;
}
.mTTen {
  margin-top: 10px;
}
.salaryBox {
  padding-left: 20px;
}
.salaryDataBox {
  text-align: right;
  padding-right: 20px;
}
.otherBg {
  height: calc(100% - 54px);
  background: url('../../../static/img/dataOverView/bg.png') no-repeat;
  background-size: 100% 100%;
  margin: 0 8%;
  background-position: center center;
  text-align: center;
  position: relative;
  > div {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
  }
  .otherPicSty {
    width: 70px;
    height: 60px;
    // margin: 8px 22px 0;
  }
}
.mr {
  margin-right: 4% !important;
}
.ml {
  margin-left: 4% !important;
}
.iconColor {
  color: rgb(109, 239, 255);
}
@media all and (min-height: 700px) and (max-height: 800px) {
  .TitleStyle {
    padding: 10px 0 !important;
  }
  .comFontSize {
    font-size: 12px !important;
  }
  .TitleStyle {
    &::before {
      height: 10px !important;
    }
  }
  .contentBoxTop {
    p {
      margin-bottom: 16px !important;
    }
  }
  .maxNum {
    font-size: 14px !important;
  }
  .realNameProportion {
    margin-top: 0 !important;
  }
  .comSinFontSize {
    font-size: 12px !important;
  }
  .otherBg {
    height: calc(100% - 40px) !important;
    .otherPicSty {
      width: 50px !important;
      height: 50px !important;
      // margin:5px 0 0 !important;
    }
  }
  .proBox {
    li {
      padding: 2% 10px !important;
      margin-bottom: 2.5% !important;
    }
  }
}
@media screen and (max-width: 1366px) and (max-height: 768px) {
  .TitleStyle {
    padding: 5px 0 !important;
  }
  .comFontSize {
    font-size: 12px !important;
  }
  .TitleStyle {
    &::before {
      height: 10px !important;
    }
  }
  .contentBoxTop {
    p {
      margin-bottom: 1% !important;
    }
  }
  .maxNum {
    font-size: 14px !important;
  }
  .realNameProportion {
    margin-top: 0 !important;
  }
  .comSinFontSize {
    font-size: 12px !important;
  }
  .RealNameBox {
    padding: 0px 11px !important;
  }
  .staSty {
    top: -40px !important;
  }
  .otherBg {
    // margin: 0 4% !important;
    height: calc(100% - 30px) !important;
    .otherPicSty {
      width: 30px !important;
      height: 30px !important;
      // margin:1px 0 0 !important;
    }
  }
  .proBox {
    li {
      padding: 1% 10px !important;
      margin-bottom: 2% !important;
    }
  }
}
@media screen and (min-width: 1024px) and (max-width: 1300px) {
  .medSinSize {
    font-size: 12px !important;
  }
  .medMaxSize {
    font-size: 14px !important;
  }
}
@media screen and (min-width: 1600px) and (max-width: 1680px) {
  .medSinSize {
    font-size: 12px !important;
  }
  .medMaxSize {
    font-size: 14px !important;
  }
}
</style>
